<template>
  <div>

    <el-button @click="dialogVisible = true" style="margin-bottom: 20px">添加</el-button>
    <el-button type="danger" @click="batch_Delete()" style="margin-bottom: 20px;margin-left: 20px">批量删除</el-button>
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="50%" :close="shutDown_dialog">
      <!--            <span>这是一段信息</span>
                  <span slot="footer" class="dialog-footer">
                <el-button @click="shutDown_dialog()">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>-->
      <adduser :close="shutDown_dialog"></adduser>

    </el-dialog>
    <!--  (currentPage-1)*pageSize,currentPage*pageSize  -->
    <el-table @selection-change="handleSelectionChange"
              :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              border
              style="width: 100%">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        label="id"
        type="index"
        :index="indexAdd"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
    </el-table>

    <div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     layout="prev, pager, next"
                     :current-page="currentPage"
                     :page-sizes="[1,5,10,20]"
                     :page-size="pageSize"
                     :total="tableData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {listenMsg} from "../js/user/adduser";
import Adduser from "./adduser";
import qs from "qs";


let tg;
let id_data;
export default {
  name: "UserList",
  inject: ['reload'],
  components: {Adduser},
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      currentPage: 1, // 当前页码
      /*total: 20, // 总条数*/
      pageSize: 10 // 每页的数据条数
    }
  },
  created() {
    let that = this;
    axios({
      method: 'post',
      url: 'http://localhost:8080/getuser',
    }).then(function (res) {
      that.tableData = res.data

    })
  },
  /* watch:{
     'dialogVisible':{
       handler:function (){
         console.log(this.dialogVisible)
   },
     }
   },*/
  /*mounted() {
    /!**
     * 跨标签通信
     *!/
     tg=listenMsg((type,payload) =>{
       //handler函数体
      if (type==='add-imp'){
        this.tableData.unshift(payload)
        /!*console.log(this.tableData.unshift(payload));*!/
      }
     /!* console.log("tg:"+type,payload)*!/
    })
  },*/
  methods: {
    /**
     * 关闭弹窗
     */
    shutDown_dialog() {
      this.dialogVisible = false;
    },
    /**
     * 获取选中的id
     */
    handleSelectionChange(val) {
      id_data = "";
      val.forEach(item => {
        const id = item.id;
        id_data += id + ",";
      })
      /*this.multipleSelection = val;*/
    },

    /**
     * 批量删除
     */
    batch_Delete() {
      let data = {
        "ids": id_data,
      }
      let that = this;
      this.axios.post('http://localhost:8080/batch_Delete', qs.stringify(data)).then(function (res) {
        if (res.data == "1") {
          that.$message.success("删除成功")
          that.reload();
        } else {
          that.$message.error("删除失败")
        }
      })
    },


    /**
     * 每页条数改变时触发 选择一页显示多少行
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },

    /**
     * 当前页改变时触发 跳转其他页
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    /**
     * 序号按index来
     */
    indexAdd(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },

  },

  /*destroyed(){
    tg&&tg();
  }*/


}
</script>
<style scoped>

</style>
